<template>
    <div class="login-body">
        <div class="main-login">
            <div class="title" style="color: #fff">随心旅游</div>
            <div class="display-box">
                <el-tabs class="title-tabs" :stretch="true" v-model="activeName">
                    <el-tab-pane label="账号密码登录" name="password">
                        <transition name="fade">
                            <div style="position: relative">
                                <loginPassWord @submit="passwordLogin" ref="loginPassWord" v-show="activeName== 'password'"></loginPassWord>
                                <el-button type="text"
                                           @click="goRegister"
                                           style="position: absolute; bottom: 90px; right: 50px">注册账号</el-button>
                            </div>
                        </transition>
                    </el-tab-pane>
                    <!--<el-tab-pane label="微信扫码登录" name="message">
                      <transition name="fade">
                        <wxLogin @loginSuccess="loginSuccess" ref="phoneSms" v-show="activeName== 'message'"></wxLogin>
                      </transition>
                    </el-tab-pane>-->
                </el-tabs>

            </div>
        </div>

        <loginBg></loginBg>
    </div>
</template>

<script>
  import {getToken} from "@/utils/auth";
  import {login} from '@/api/user'
  import loginPassWord from '@/components/login/loginPassWord'
  import loginBg from '@/components/loginBg'
  export default {
    components: {
      loginPassWord,
      loginBg
    },
    data () {
      return {
        dataForm: {
          userName: '',
          password: '',
        },
        appList: [],
        showPic: 1,
        activeName: 'password',
        isDialogShow: false,
        redirect: '',
        loading: false
      }
    },
    mounted () {

    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect
          if (this.redirect === '/login') {
            this.redirect = '/index'
          }
        },
        immediate: true
      }
    },
    methods: {
      passwordLogin (params) {
        login(params).then(res => {
          this.$refs.loginPassWord.loading = false
          this.$message.success('登录成功')
          let login_user = getToken()
          this.$store.commit('user/setUserInfo', {login_user})
          this.$router.push({
            path: this.redirect || '/index'
          })
        }).catch(() => {
          this.$refs.loginPassWord.loading = false
        })
      },
      loginSuccess () {
        this.$message.success('登录成功')
        this.$router.push({
          path: this.redirect || '/home'
        })
      },
      goRegister () {
        this.$router.push({
          path: '/register'
        })
      }
    }
  }
</script>

<style lang="scss">
    body, html{
        height: 100%;
    }
    .login-body {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: linear-gradient(top, rgb(218, 235, 232) 0%, #66b7ff 120%);
        .title {
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            //margin-top: 80px;
        }
        canvas {
            position: absolute;
        }
    }
    .login-body__top {
        display: block;
        background-color: #fff;
        height: 120px;
    }
    .main {
        max-width: 1200px;
        height: 100%;
        margin: 0 auto;
        background: #f2f2f2;
        padding: 0 0 70px 0;
    }
    .main__top--logo {
        display: block;
        float: left;
        margin: 30px 0;
        overflow: hidden;
    }
    .main__top--contact {
        display: block;
        height: 120px;
        float: right;
        font-size: 20px;
        text-align: right;
        line-height: 120px;
    }
    .main-login {
        //background: url(~@/assets/img/login_bg.jpg);
        position: absolute;
        right: 10%;
        top: 45%;
        transform: translateY(-50%);
        opacity: 0.73;
        z-index: 88;
    }
    .main__bottom {
        margin: 0 auto;
        max-width: 1200px;
        overflow: hidden;
        position: relative;
    }
    .main__bottom--left {
        float: left;
        width: 500px;
        height: 580px;
        position: relative;
        margin-top: 80px;
    }
    .change-box {
        color: #fff;
        text-align: center;
        position: relative;
        width: 500px;
        height: 580px;
    }
    .change-box>img {
        width: 500px;
        height: 500px;
    }
    .change-box>h3 {
        position: absolute;
        font-size: 30px;
        color: #fff;
        letter-spacing: 4px;
    }

    .fade-enter-active, .fade-leave-active{
        transition: opacity 1s;   //类名：隐藏到显示过程所需要的时间
    }
    .fade-enter, .fade-leave-to {      // 类名:初始化状态
        opacity: 0;
    }

    .main__bottom--right {
        background-color: #fff;
        border-radius: 20px;
        float: right;
        margin-top: 100px;
        width: 400px;
        height: 500px;
        position: absolute;
        right: 50px;
    }
    .display-box {
        padding-top: 10px;
        margin: 30px auto;
        width: 440px;
        height: 380px;
        background: rgba(255,255,255, 1);
        border-radius: 9px;
    }
    .companyItem {
        font-size: 21px;
        font-weight: bold;
        padding: 15px;
        border: 1px solid #409EFF;
        border-radius: 5px;
        text-align: center;
        color: #084e96;
        cursor: pointer;
        margin-bottom: 21px;
    }
    .title-tabs .el-tabs__nav-scroll{
        display: flex;
        justify-content: center;
    }
</style>
